<template>
  <div class="Apply">
    <p class="title">应急灾备系统状态</p>
    <div class="statusBox">
      <div class="typeItem" @click="Toggle('1')" :class="[typeColor == '1' ? 'normal' : '']">
        <div class="imgBg" style="background: #e1f3d8">
          <img src="@/assets/images/zc.png" alt="" />
        </div>
        <div class="rightBox">
          <p>{{
            statusCount?.selectBySysBasicState_1 ? statusCount?.selectBySysBasicState_1 : 0
          }}</p>
          <p>正常</p>
        </div>
      </div>
      <div class="typeItem" @click="Toggle('4')" :class="[typeColor == '4' ? 'rehearsal' : '']">
        <div class="imgBg" style="background: #ecf5ff">
          <img src="@/assets/images/ylz.png" alt="" />
        </div>
        <div class="rightBox">
          <p>{{
            statusCount?.selectBySysBasicState_2 ? statusCount?.selectBySysBasicState_2 : 0
          }}</p>
          <p>演练中</p>
        </div>
      </div>
      <div
        class="typeItem"
        @click="Toggle('5')"
        :class="[typeColor == '5' ? 'nonWalkthrough' : '']"
      >
        <div class="imgBg" style="background: #f2f6fc">
          <img src="@/assets/images/fyl.png" alt="" />
        </div>
        <div class="rightBox">
          <p>{{
            statusCount?.selectBySysBasicState_3 ? statusCount?.selectBySysBasicState_3 : 0
          }}</p>
          <p>非演练应急处置</p>
        </div>
      </div>
      <div class="typeItem" @click="Toggle('6')" :class="[typeColor == '6' ? 'abnormal' : '']">
        <div class="imgBg" style="background: #fef0f0">
          <img src="@/assets/images/yc.png" alt="" />
        </div>
        <div class="rightBox">
          <p>{{
            statusCount?.selectBySysBasicState_4 ? statusCount?.selectBySysBasicState_4 : 0
          }}</p>
          <p>异常</p>
        </div>
      </div>
    </div>
    <div class="listBox">
      <el-form ref="searchForm" :inline="true" class="demo-form-inline">
        <el-form-item label="系统名称">
          <el-select
            v-model="state"
            placeholder="请选择系统"
            filterable
            clearable
            @change="handleSelect"
          >
            <el-option
              v-for="(item, index) in restaurants"
              :key="index + 1"
              :label="item.value"
              :value="item.orgId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="系统编号">
          <el-input clearable v-model="sysId" class="inline-input" placeholder="请输入系统编号" />
        </el-form-item>
        <!-- <el-form-item label="系统代码">
          <el-input clearable v-model="sysCode" class="inline-input" placeholder="请输入系统代码" />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @keyup.enter="monitor()" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="table">
        <el-table
          height="100%"
          :data="tableData"
          v-loading="loading"
          element-loading-text="加载中"
          :header-cell-style="{
            background: '#F9F9F9',
            fontSize: '14px',
            color: '#606266',
            fontWeight: '600'
          }"
          :cell-style="{ fontSize: '14px', color: '#303133', fontWeight: '400' }"
        >
          <el-table-column align="center" prop="sysNumber" label="系统编号" />
          <el-table-column align="center" prop="code" label="系统代码" />
          <el-table-column align="center" prop="caption" label="系统名称" />
          <el-table-column align="center" prop="n6" label="系统部署位置" />
          <el-table-column align="center" label="状态">
            <template #default="scope">
              <!-- <el-button size="small" @click="handleEdit(scope.row)" link type="primary">
                {{ scope.row.sysState }}
              </el-button> -->
              <el-dropdown trigger="click" @command="handleCommand">
                <el-button type="primary">
                  {{ scope.row.sysState }}
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :command="{ type: '1', row: scope.row.sysId }">
                      正常</el-dropdown-item
                    >
                    <el-dropdown-item :command="{ type: '4', row: scope.row.sysId }">
                      演练中</el-dropdown-item
                    >
                    <el-dropdown-item :command="{ type: '5', row: scope.row.sysId }">
                      非演练应急处置</el-dropdown-item
                    >
                    <el-dropdown-item :command="{ type: '6', row: scope.row.sysId }">
                      异常</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="levelofProtection" label="网络安全等级保护级别" />
          <el-table-column align="center" prop="constructionLevel" label="灾备建设等级（新国际)" />
          <el-table-column align="center" prop="constructionMode" label="灾备建设模式" />
          <el-table-column align="center" prop="disasterRecoveryStrategy" label="灾备策略" />
          <el-table-column align="center" prop="sysSource" label="系统来源" />
          <el-table-column align="center" prop="endUpdateTime" label="最后修改时间" />
        </el-table>
      </div>
      <el-pagination
        background
        layout="total,sizes, prev, pager, next"
        :current-page="pageNum"
        :page-sizes="[10, 15, 20]"
        :page-size="pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
  import {
    selectByOgSysIdAndName,
    selectBySysBasicStateSize,
    selectBySysBasicState,
    selectBySysBasicStateById
  } from '@/http/Disaster';
  const restaurants = reactive([]);
  const sysId = ref('');
  // const sysCode = ref('');
  const state = ref('');
  const orgId = ref('');
  // const container = ref(null);
  // const tableHeight = ref(0);
  const typeColor = ref('1');
  const statusCount = ref('');
  const pageNum = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const tableData = reactive([]);
  const loading = ref(true);
  onMounted(() => {
    enterKeyup();
    changeOrgan();
    // calHeight();
    StateSize();
    StateList();
  });
  const Toggle = (type: string) => {
    typeColor.value = type;
    loading.value = true;
    StateList();
  };
  const changeOrgan = () => {
    selectByOgSysIdAndName().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      restaurants.length = 0;
      res.data.data.forEach((item) => {
        (restaurants as any).push({
          value: item.caption,
          orgId: item.code
        });
      });
    });
  };
  const StateSize = () => {
    selectBySysBasicStateSize().then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      statusCount.value = res.data.data;
    });
  };
  const StateList = () => {
    selectBySysBasicState({
      pageSize: pageSize.value,
      pageNum: pageNum.value,
      sysState: typeColor.value,
      code: orgId.value,
      sysNumber: sysId.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        loading.value = false;
        return;
      }
      loading.value = false;
      tableData.length = 0;
      (tableData as any).push(...res.data.data.rows);
      total.value = res.data.data.total;
    });
  };
  const handleSelect = (item) => {
    orgId.value = item;
  };
  //   const calHeight = () => {
  //     const rect = container.value.getBoundingClientRect();
  //     tableHeight.value = rect.height;
  //   };
  const monitor = () => {
    document.onkeydown = (e) => {
      if (e.keyCode == 13) {
        search();
      }
    };
  };
  const search = () => {
    if (!state.value) {
      orgId.value = '';
    }
    pageNum.value = 1;
    sysId.value = sysId.value.replace(/(^\s*)|(\s*$)/g, '');
    loading.value = true;
    StateList();
  };
  const ModifiedState = (data: string) => {
    selectBySysBasicStateById({
      sysId: data.row,
      sysState: data.type
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      loading.value = true;
      StateSize();
      StateList();
    });
  };
  const handleCommand = (command: string | number | object) => {
    ModifiedState(command);
  };
  const enterKeyupDestroyed = () => {
    document.removeEventListener('keyup', monitor());
  };
  const enterKeyup = () => {
    document.addEventListener('keyup', monitor());
  };
  const handleSizeChange = (val: number) => {
    pageSize.value = val;
    loading.value = true;
    StateList();
  };
  const handleCurrentChange = (val: number) => {
    pageNum.value = val;
    loading.value = true;
    StateList();
  };
  onBeforeUnmount(() => {
    enterKeyupDestroyed();
  });
</script>
<style scoped lang="less">
  .Apply {
    height: 100%;
    .title {
      font-size: 16px;
      font-weight: 300px;
      color: #1f2329;
      line-height: 22px;
      margin: 0;
      padding: 0;
      margin-bottom: 18px;
    }
    .statusBox {
      height: 128px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .typeItem {
        height: 128px;
        background: #fff;
        width: 442px;
        border-radius: 20px;
        padding: 30px 30px 0px 30px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .imgBg {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          margin-bottom: 20px;
          img {
            width: 30px;
            height: 30px;
            padding: 9px;
          }
        }
        .rightBox {
          margin-left: 20px;
          p:nth-child(1) {
            padding: 0;
            margin: 0;
            color: #303133;
            font-size: 30px;
          }
          p:nth-child(2) {
            padding: 0;
            margin: 0;
            color: #909399;
            font-size: 14px;
            line-height: 22px;
            margin-bottom: 20px;
          }
        }
        &.normal {
          background: #67c23a;
          .rightBox {
            p {
              color: #fff;
            }
          }
        }
        &.rehearsal {
          background: #409eff;
          .rightBox {
            p {
              color: #fff;
            }
          }
        }
        &.nonWalkthrough {
          background: #253858;
          .rightBox {
            p {
              color: #fff;
            }
          }
        }
        &.abnormal {
          background: #f56c6c;
          .rightBox {
            p {
              color: #fff;
            }
          }
        }
      }
    }
    .listBox {
      height: calc(100% - 188px);
      background: #fff;
      border-radius: 10px;
      padding: 20px;
      box-sizing: border-box;
      .table {
        height: 528px !important;
        margin-bottom: 16px;
        :deep(.el-table) {
          height: 100%;
          tr {
            height: 48px;
          }
        }
      }
      .el-pagination {
        // display: flex;
        justify-content: flex-end;
      }
    }
  }
</style>
